<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 数据表格</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">

</head>

<body class="gray-bg" style="font-size: 10px;">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>用户缴费</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index_v1.html">主页</a>
            </li>
            <li>
                <a href="payment.html"><strong>营销收费</strong></a>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="empty_page.html" class="btn btn-primary">活动区域</a>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <h5>用户信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="userinfo.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="userinfo.html#">选项1</a>
                            </li>
                            <li><a href="userinfo.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" id="userInfo">
                    <div class="ibox-query">
                        <form role="form" id="queryuser" class="form-inline">
                            <div class="form-group">
                                <label for="exampleInputEmail2" class="sr-only">用户名</label>
                                <input type="text" placeholder="请输入用户名" class="form-control" v-model="UserName">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">用户号</label>
                                <input type="text" placeholder="请输入用户号" class="form-control" v-model="UserID">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">设备号</label>
                                <input type="text" placeholder="请输入设备号" class="form-control" v-model="DeviceId">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">手机号</label>
                                <input type="text" placeholder="请输入手机号" class="form-control" v-model="UserPhone">
                            </div>
                            <button class="btn btn-primary" type="button" style="margin-top: 5px;" v-on:click="goons()">
                                查询
                            </button>
                        </form>
                    </div>
                    <table id="content"
                           class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户名</th>
                            <th>用户号</th>
                            <th>用户地址</th>
                            <th>门牌号</th>
                            <th>户表号</th>
                            <th>户表模式</th>
                            <th>账户余额</th>
                        </tr>
                        </thead>
                        <tbody style="cursor: pointer">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>欠费账单信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="table_data_tables.html#">选项1</a>
                            </li>
                            <li><a href="table_data_tables.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div id="input" class="ibox-content">
                    <table id="device" class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>账期</th>
                            <th>账期周期</th>
                            <th>起数(立方米)</th>
                            <th>止数(立方米)</th>
                            <th>水量(立方米)</th>
                            <th>账单状态</th>
                            <th>开账日期</th>
                            <th>违约天数</th>
                            <th>违约金</th>
                            <th>账期总额</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>账单费用明细</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="table_data_tables.html#">选项1</a>
                            </li>
                            <li><a href="table_data_tables.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example"
                           id="charge_table">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">阶梯</th>
                            <th class="text-center">单价(元/立方米)</th>
                            <th class="text-center">用水量(立方米)</th>
                            <th class="text-center">费用(元)</th>
                        </tr>
                        </thead>
                        <tbody class="text-center"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>账单费用明细</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="table_data_tables.html#">选项1</a>
                            </li>
                            <li><a href="table_data_tables.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                    <form class="form-horizontal" id="apps">
                        <br/><br/><br/>
                        <div class="test">
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">用户名称</span>
                                    <input type="text" id="userName" v-model="payIn[0].userName" readonly="value"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">用户编号</span>
                                    <input type="text" id="userID" v-model="payIn[0].userID" readonly="value"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">水表编号</span>
                                    <input type="text" id="deviceId" v-model="payIn[0].deviceId" readonly="value"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">开户日期</span>
                                    <input type="text" id="userOpenDate" v-model="payIn[0].userOpenDate"
                                           readonly="value" class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">账户余额</span>
                                    <input type="text" id="userRemainder" readonly="value"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">联系电话</span>
                                    <input type="text" id="userPhone" readonly="value" class="form-control input-group">
                                </div>
                            </div>
                            <!--                            <div class="col-sm-6">-->
                            <!--                                <div class="input-group m-b" style="position: relative;">-->
                            <!--                                    <span class="input-group-addon">表端余额</span>-->
                            <!--                                    <input type="text"  readonly="value" placeholder="表端余额" class="form-control" style="z-index:0;">-->
                            <!--                                    <button style=" position: absolute;left: 300px; z-index:1; top: 3px; background-color: #B0C4DE ;">读余额</button>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">最近操作</span>
                                    <input type="text" readonly="value" placeholder="最近操作"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">欠费期数</span>
                                    <input type="text" id="OweNum" readonly="value" placeholder="欠费期数"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">欠费总额</span>
                                    <input type="text" id="OweTotal" readonly="value" placeholder="欠费总额"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">应缴金额</span>
                                    <input type="text" id="Should" readonly="value" placeholder="应缴金额"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon"
                                                                   style="background-color:#F0F8FF">实缴金额</span>
                                    <input type="text" id="Actually" readonly="value" placeholder="实缴金额"
                                           class="form-control input-group">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group m-b"><span class="input-group-addon">缴费方式</span>
                                    <input type="text" placeholder="平台-现金支付" class="form-control" list="payWay">
                                    <datalist id="payWay">
                                        <option id="payWay1">平台-现金支付</option>
                                        <option id="payWay2">平台-微信支付</option>
                                        <option id="payWay3">平台-支付宝支付</option>
                                        <option id="payWay4">平台-刷卡支付</option>
                                    </datalist>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div style="text-align: center;">
                                    <input class="btn btn-primary" id="submit_money" type="button" src="" value="缴费" onclick="sub();"
                                           style="width: 270px;"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content">

                </div>
            </div>
        </div>
    </div>

</div>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>


<script src="js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>

<script>
    var table = $('#content').DataTable({
        bFilter: false,
        bLengthChange: false,
    });
    var app = new Vue({
        el: "#app",
        data: {
            userinfo: []
        },
        methods: {
            queryall: function () {
                var that = this;
                table.clear().draw();
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/WaterCloud_war/user/getUserInfo",
                    success(msg) {

                        for (var i = 0; i < msg.length; i++) {
                            var list = [];
                            list.push(msg[i].id, msg[i].userName, msg[i].userId, msg[i].userDir, msg[i].doorId, msg[i].deviceId, '预付费', msg[i].userRemainder)
                            table.row.add(list).draw();
                        }
                    }
                })
            }
        },
        mounted: function () {
            this.queryall();
        }
    });
</script>
<script>
    var queryuser = new Vue({
        el: '#queryuser',
        data: {
            UserName: '',
            UserID: '',
            DeviceId: '',
            UserPhone: '',
            SpecifiedUser: []
        },
        methods: {
            /*提交筛选条件*/
            goons: function () {
                var that = this;
                if (this.UserName == '' && this.UserID == '' && this.DeviceId == '' && this.UserPhone == '') {
                    app.queryall();
                } else {
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/WaterCloud_war/user/selectSpecifiedUser",
                        data: "UserName=" + this.UserName + "&UserID=" + this.UserID + "&DeviceId=" +
                            this.DeviceId + "&UserPhone=" + this.UserPhone,
                        success(msg) {
                            // console.log(this.data)
                            table.clear().draw();
                            for (var i = 0; i < msg.length; i++) {
                                var list = [];
                                list.push(msg[i].id, msg[i].userName, msg[i].userId, msg[i].userDir, msg[i].doorId, msg[i].deviceId, '预付费', msg[i].userRemainder);
                                table.row.add(list).draw();
                            }

                        }
                    })
                }
            }
        }
    })
</script>

<script type="text/javascript">
    // 初始化表格
    var device = $('#device').DataTable();
    var charge_table = $('#charge_table').DataTable();
    var deviceId;
    var nums;
    // 点击某行用户信息，获取设备编号
    var myTable = $('#content').DataTable(); // user_table为table的id
    $("#content").on("click", "tr", function () {
        deviceId = myTable.row(this).data()[5]; // deviceId为选中用户的设备号
        console.log("***", deviceId)
        var message; // 存储请求返回的数据
        var that = this;

        var inputGroupArray = document.getElementsByClassName('input-group');
        for (let i = 0; i < inputGroupArray.length; i++) {
            inputGroupArray[i].value = '';
        }


        //ajax请求数据
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/WaterCloud_war/device/getDevice",
            data: "DeviceId=" + deviceId,
            success: function (msg) {
                console.log(msg)
                // 清空表格
                device.clear().draw();
                charge_table.clear().draw(); // 清空表格
                // 数据格式化
                var L = msg.length;
                var moneys = 0;
                for (let i = 0; i < msg.length; i++) {
                    msg[i]['id'] = i;
                    let day, sum, sumDate, crossDay, crossMoney, money, input;
                    /* 计算账期周期 */
                    let year = Number(msg[i].num.slice(0, 4)); //年份
                    let month = Number(msg[i].num.slice(4,)); //月份

                    var d = new Date(year, month, 0);
                    day = d.getDate(); // 天数


                    /* 计算用水量 */
                    sum = (msg[i].end - msg[i].begin).toFixed(4);
                    msg[i]['sum'] = parseFloat(sum);

                    /* 开账日期 */
                    sumDate = year + '-' + month + '-' + day;

                    /* 违约天数（30天） */
                    let date1 = new Date(sumDate);
                    let date2 = new Date();
                    date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
                    date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
                    const diff = date2.getTime() - date1.getTime();
                    crossDay = diff / (24 * 60 * 60 * 1000) - 30;

                    if (crossDay < 0) {
                        crossDay = 0;
                    }


                    /* 账期总额、违约金*/
                    // 收费标准：0-15：0．6元∕吨，15—20：1．4元∕吨，>20：2．1元∕吨
                    let sums = sum;
                    if (sums > 20) {
                        money = 15 * 0.6 + 5 * 1.4 + (sums - 20) * 2.1
                    } else if (sums > 15) {
                        money = 15 * 0.6 + (sums - 15) * 1.4
                    } else {
                        money = (sums) * 0.6
                    }
                    crossMoney = (money * crossDay * 0.005).toFixed(2); // 违约金
                    money = (money + parseFloat(crossMoney)).toFixed(2); // 账期总额

                    moneys = moneys + money;   //bug 只能显示一期的欠费总额，不能叠加

                    /* 操作（复选框） */
                    input = '<input class="input-my" type="checkbox" value="' + i + '" style="cursor: pointer" />'


                    /* 写入表格 */
                    let dataArray = new Array();
                    dataArray.push(i + 1, msg[i].num, day, msg[i].begin.toFixed(4), msg[i].end
                            .toFixed(4), sum, msg[i].moneyStatus,
                        sumDate, crossDay, crossMoney, money, input);

                    // console.log(dataArray)

                    // 写入数据
                    device.row.add(dataArray).draw();
                    message = msg;
                }

                var inputArray = new Array();
                var myArray = document.getElementsByClassName('input-my');
                for (let i = 0; i < myArray.length; i++) {
                    myArray[i].addEventListener('click', function () {
                        let str = myArray[i].getAttribute('value')
                        console.log(str)
                        let dir = inputArray.indexOf(str)
                        if (dir == -1) {
                            inputArray.push(str);
                        } else {
                            inputArray.splice(dir)
                        }
                        nums = message[0].num;
                        charge_table.clear().draw(); // 清空表格
                        var arr = message;
                        var uname = document.getElementById("userName");
                        var uID = document.getElementById("userID");
                        var uPhone = document.getElementById("userPhone");
                        var dID = document.getElementById("deviceId");
                        var uOpenDate = document.getElementById("userOpenDate");
                        var uRemainder = document.getElementById("userRemainder");
                        uname.value = arr[0].userName;
                        uID.value = arr[0].userID;
                        uPhone.value = arr[0].userPhone;
                        dID.value = arr[0].deviceId;
                        uOpenDate.value = arr[0].userOpenDate;
                        uRemainder.value = arr[0].userRemainder;
                        var oweNum = document.getElementById("OweNum");
                        oweNum.value = L;
                        var oweTotal = document.getElementById("OweTotal");
                        oweTotal.value = parseFloat(moneys);
                        var should_money = document.getElementById("Should");
                        should_money.value = parseFloat(moneys);
                        var actually_money = document.getElementById("Actually");
                        actually_money.value = parseInt(moneys) + 1;

                        // bug: input标签中v-on执行顺序早于v-model
                        var that = this;
                        setTimeout(function () {
                            let sumArray = new Array(['1', '第一梯度', '0.60',
                                0, 0
                            ], ['2', '第二梯度', '1.40', 0, 0], ['3',
                                '第三梯度', '2.10', 0, 0
                            ]); // 存储各梯度的水量和金额
                            for (let i = 0; i < inputArray.length; i++) {
                                let j = parseInt(inputArray[i]) // 序号
                                let sums = message[j].sum; // 用水量
                                if (sums > 20) {
                                    sumArray[0][3] += 15
                                    sumArray[0][4] += 15 * 0.6
                                    sumArray[1][3] += 5
                                    sumArray[1][4] += 5 * 1.4
                                    sumArray[2][3] += (sums - 20)
                                    sumArray[2][4] += (sums - 20) * 2.1
                                } else if (sums > 15) {
                                    sumArray[0][3] += 15
                                    sumArray[0][4] += 15 * 0.6
                                    sumArray[1][3] += (sums - 15)
                                    sumArray[1][4] += (sums - 15) * 1.4
                                } else {
                                    sumArray[0][3] += sums
                                    sumArray[0][4] += (sums) * 0.6
                                }
                            }
                            // 数据格式化（水量4位小数，价格2位小数）
                            for (let i = 0; i < sumArray.length; i++) {
                                sumArray[i][3] = sumArray[i][3].toFixed(4)
                                sumArray[i][4] = sumArray[i][4].toFixed(2)
                                charge_table.row.add(sumArray[i]).draw();
                            }
                        }, 10)
                    });
                }
            }
        })
    })

    function sub() {
        /**
         * 根据欠费缴费，缴费金额为欠费金额的上取整
         * 根据水表号和欠费期数来 更新数据库中的MoneyStatus
         */
        console.log(deviceId + ' ' + nums);
        console.log("开始缴费！");
        alert("开始缴费！");
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/WaterCloud_war/device/updateDevice",
            data: "DeviceId=" + deviceId + "&Nums=" + nums,
            success(msg) {
                if (msg == true) { //先仅通过数据库更新成功来判断是否缴费成功
                    alert("缴费成功！");
                    window.location.reload();

                }
            },
            error: function () {
                alert('error');
            }
        })
    }
</script>
<script>
    var clickArray = new Array();
    clickArray.push(1);
</script>

</body>
</html>
